<template>
  <div class="person">
    <h2>我是Person组件</h2>
    <h4>姓名：{{name}}</h4>
    <h4>年龄：{{age}}</h4>
    <h4>性别：{{gender}}</h4>
    <h4>座驾：{{car}}</h4>
  </div>
</template>

<script>
  export default {
    name:'Person',
    // 第一种接收方式：仅接收
    // props:['name','age','gender','car'],

    // 第二种接收方式：接收+限制数据类型
    /* props:{
      name:String,
      age:Number,
      gender:String,
      car:Object
    }, */

    // 第三种接收方式：接收+限制数据类型+限制必要性+指定默认值
    props:{
      name:{
        type:String,
        required:true,
        default:'未知名字'
      },
      age:{
        type:Number,
        required:false,
        default:1
      },
      gender:{
        type:String,
        required:true,
        default:'未知性别'
      },
      car:{
        type:Object,
        required:true,
        default(){
          return {brand:'雅迪',color:'白色'}
        }
      }
    }

  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>